<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>问题分析</title>
    <link type="text/css" rel="stylesheet" href="/static/common/fontsawesome/css/font-awesome.css"/>
    <link type="text/css" rel="stylesheet" href="/static/common/style.css"/>
    <link rel="stylesheet" href="/static/pear/component/pear/css/pear.css" />
    <script src="/static/common/jquery-3.6.0.min.js"></script>
    <script src="/static/pear/component/layui/layui.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.3.0-rc.1/echarts-en.common.js"></script>
    <style>
        html, body{
            overflow:auto;
        }
    </style>
</head>
<body>
<div class="main_box">
    <div class="cont_box clearfix">
        <div>
            <h2>
                参加测试总人数：{$data.test_count} 　
                未参加测试人数：{$data.untest_count} 　
                合格人数：{$data.pass_count} 　
                未合格人数：{$data.unpass_count}
            </h2>
        </div>

        <table class="layui-table" >
            <thead>
            <tr>
                <th width="40%">问题/答案</th>
                <th width="25%">分析</th>
                <th width="35%">图表</th>
            </tr>
            </thead>
            <tbody>

            {volist name="list" id="vo" key="k" }
            <tr>
                <td>
                    问题{$k}:{$vo.title}
                    <font color="gray">({eq name="vo.a_type" value="0"}单选{else /}多选{/eq})</font>
                    <br><br>
                    {volist name="vo.answer" id="v"}

                    <span style="display:inline-table;width:70%;">[{$v.b}]:{$v.t}</span>   选择率：{$v.choose}<br>

                    {/volist}
                    <br>
                    正确答案：[{$vo.check}]
                </td>
                <td>
                    答题人数：{$vo.answer_count}　　未答题人数：{$vo.unanswer_count} <br>
                    正确答案：[{$vo.check}]　　正确率：{$vo.check_apr} <br>
                </td>
                <td>
                    <div id="main{$k}" style="width: 400px;height:250px;"></div>
                    <script>
                        // 基于准备好的dom，初始化echarts实例
                        var myChart{$k} = echarts.init(document.getElementById('main{$k}'));
                        //var data1 = ['正确答案[{$vo.check}]']; data2 = ['{$vo.check_apr}'];
                        var data1 = []; data2 = [];
                        var check = "{$vo.check}";
                        check = check.split(',');
                        {volist name="vo.answer" id="v"}
                        data1.push('{$v.b}');
                        data2.push('{$v.choose}');
                        {/volist}
                            for(var i in data2){
                                data2[i] = data2[i].replace('%','');
                            }
                            data1.reverse();
                            data2.reverse();
                            option = {

                                title: {
                                    text: '选择率',
                                    //subtext: '数据来自测试'
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'shadow'
                                    }
                                },

                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis: {
                                    max:120,
                                    type: 'value',
                                    boundaryGap: [0, 0.01],
                                    splitLine:{
                                        show:false
                                    }
                                },
                                yAxis: {
                                    type: 'category',
                                    data: data1,
                                    splitLine:{
                                        show:false
                                    }
                                },
                                series: [
                                    {
                                        type: 'bar',
                                        data: data2,
                                        label: {
                                            normal: {
                                                show: true,
                                                position: 'right',
                                                formatter:'{c}%'
                                            }
                                        },
                                        itemStyle: {
                                            //通常情况下：
                                            normal:{
                                                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                                color: function (params){
                                                    console.log(params);
                                                    console.log(check);
                                                    if($.inArray(params.name, check) != -1){
                                                        return "#00EE00";
                                                    }else{
                                                        return "#FF8247";
                                                    }
                                                    //var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)'];
                                                    //return colorList[params.dataIndex];
                                                }
                                            }
                                        }
                                    }
                                ]
                            };
                            // 使用刚指定的配置项和数据显示图表。
                            myChart{$k}.setOption(option);
                    </script>
                </td>
            </tr>
            {/volist}
            </tbody>
        </table>

        <div>


        </div>

    </div>
</div>
</body>
</html>
